<template>
  <div class="group-info">
    <div class="group-info__title"></div>
    <div class="group-info__body">
      <el-avatar :size="100" :src="selectMember.avatar" class="group-info__body__avatar">
        <img src="../../../../assets/picture/群头像150.png"/>
      </el-avatar>
      <span class="group-info__body__name">{{ selectMember.name }}</span>
      <Button class="group-info__body__button" type="primary" round @click="toChat">进入群聊</Button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Button } from 'element-ui'
import _ from 'lodash'
export default {
  components: { Button },
  computed: {
    ...mapState('app', ['selectMember', 'chatList'])
  },
  methods: {
    toChat () {
      const roomId = this.selectMember.roomId.toString()
      const _chatList = _.cloneDeep(this.chatList)
      if (_.isUndefined(_chatList[roomId])) {
        this.$store.dispatch('app/addChatList', roomId)
      }
      this.$store.dispatch('app/setRoomId', roomId)
      this.$store.dispatch('app/setChatPanelType', 'chat')
      this.$store.dispatch('app/setChatListVisible', true)
    }
  }
}
</script>

<style lang="scss" scoped>
.group-info {
  &__title {
    height: 51px;
    width: 100%;
    border-bottom: 1px solid #eee;
  }
  &__body {
    width: 100%;
    height: calc(100% - 51px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    &__avatar {
      position: absolute;
      left: calc(50% - 50px);
      top: 141px;
      width: 100px;
      height: 100px;
    }
    &__name {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      position: absolute;
      top: 250px;
      text-align: center;
    }
    &__button {
      position: absolute;
      top: 300px;
    }
  }
}
</style>
